<template>
    <Pop :show="indicator.popIndicator" :is-mask="false" :is-close="false" :is-back="false" :is-title="false"
        :style="{ borderRadius: 0 }" :padding-type="''">
        <div ref="i_pops" class="i-pops">
            <div class="i-tit">
                <!-- <span class="c-title-3">指标</span> -->

                <span class="c-title-3 tts">{{ $t("message.Indicator.a") }}</span>
                <span class="c-title-5 clears" @click="onClear">{{ $t("message.Indicator.cle") }}</span>
                <img src="@/assets/close.png" class="i-close" @click="indicator.changePopIndicator(false)" />
            </div>
            <div class="scroll-i">
                <div class="sbox">
                    <div class="cc-t">
                        <!-- <div class="i-nav c-title-3">主图指标</div> -->
                        <div class="i-nav c-title-3">{{ $t("message.Indicator.b") }}</div>
                        <div class="i-list">
                            <div class="i-item c-title-5" v-for="item in indicator.main">
                                <JCheckbox v-model="item.selected" @change="onChangeItem(item)">
                                    <div class="i-txt">{{ item.title }}</div>
                                </JCheckbox>
                            </div>
                        </div>
                    </div>

                    <div class="cc-t">
                        <!-- <div class="i-nav c-title-3">副图指标</div> -->
                        <div class="i-nav c-title-3">{{ $t("message.Indicator.c") }}</div>
                        <div class="i-list">
                            <div class="i-item c-title-5" v-for="item in indicator.sub">
                                <JCheckbox v-model="item.selected" @change="onChangeItem(item)">
                                    <div class="i-txt">{{ item.title }}</div>
                                </JCheckbox>
                            </div>
                        </div>
                    </div>
                    <!-- 信号 -->
                    <div class="cc-t">
                        <!-- <div class="i-nav c-title-3">信号</div> -->
                        <div class="i-nav c-title-3">Signal</div>
                        <div class="i-list">
                            <div class="i-item c-title-5" v-for="item in swicth.list">
                                <JCheckbox v-model="item.selected" @change="onChangeSwicth(item)">
                                    <div class="i-txt">{{ item.title }}</div>
                                </JCheckbox>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </Pop>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useIndicator } from "@/stores/indicator";
import { Bus, INDICATOR_TOGGLE, SWITCH_TOGGLE } from "@/connetion/Bus";
import Pop from "@/components/pop/index.vue";
import JCheckbox from "@/components/j-checkbox/index.vue";
import { useSwitch } from "@/stores/switchBox";
const swicth = useSwitch()

const i_pops = ref();
const indicator = useIndicator();
const onChangeSwicth = (item: any) => {
    setTimeout(() => {
        console.log(item);
        Bus.emit(SWITCH_TOGGLE, item);
    }, 30);
};
const onChangeItem = (item: any) => {
    setTimeout(() => {
        console.log(item);
        Bus.emit(INDICATOR_TOGGLE, item);
    }, 30);
};
const onClear = () => {
    indicator.list.forEach(i => {
        if (i.selected) {
            i.selected = false;
            Bus.emit(INDICATOR_TOGGLE, i);
        }
    });
    swicth.list.forEach(i => {
        if (i.selected) {
            i.selected = false;
            Bus.emit(SWITCH_TOGGLE, i);
        }
    });
};
</script>

<style lang="less" scoped>
.i-pops {
    // display: flex;
    // justify-content: center;
    // align-items: stretch;
    // gap: 40px;
    // flex-direction: column;
    overflow-y: auto;
    width: 400px;
    // user-select: none;
}

.cc-t {
    padding: 12px;
}

.i-list {
    // padding-right: 50px;
}

.scroll-i {
    height: 500px;
    overflow-y: auto;
    margin-right: 3px;

    .sbox {
        display: flex;
        // gap: 40px;
        justify-content: center;
    }
}

.i-nav {
    margin-bottom: 20px;
}

.i-txt {
    margin-left: 10px;
}

.i-item {
    cursor: pointer;
    margin-bottom: 8px;
}

.i-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2d3338;
    padding: 12px 16px;

    .i-close {
        cursor: pointer;
        width: 20px;
        height: 20px;
        object-fit: contain;
        // user-select: none;
        opacity: 0.4;

        &:hover {
            opacity: 0.8;
        }
    }

    .tts {
        flex: 1;
    }

    .clears {
        cursor: pointer;
        margin-right: 20px;
        color: #b1b6c6;
        width: 40px;
        height: 26px;
        border-radius: 4px;
        border: 1px solid #424951;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
            color: #fff;
        }
    }
}</style>
